{% load static %}

<div class="container-fluid">
    <div class="row">
        <div class="col-md-1"></div>
        <div id="footer" class="col-md-10" style="padding: 2% 0;">
            <div class="row">
                <img id="wechat-code" style="width: 10%; position: absolute; right: 9.5%; bottom: 85%;" src="{% static 'jingsongimg/wechatcode.jpg' %}"/>
                <img id="qq-code" style="width: 10%; position: absolute; right: 5.2%; bottom: 85%;" src="{% static 'jingsongimg/qqcode.png' %}"/>
                <div class="col-md-4"></div>
                <div class="col-md-8">
                    <div class="row">
                        <div class="col-md-4 text-right" style="padding-right: 0;">
                            <br>
                            <a class="footer-a" href="#">关于我们</a>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <a class="footer-a" href="#">相关链接</a>
                            <br>
                        </div>
                        <div class="col-md-1">
                             <hr class="footer-hr">
                        </div>
                        <div class="col-md-3 text-left" style="padding-right: 0;">
                            <span class="footer-span">地址：山东省威海市文化西路2号</span><br>
                            <span class="footer-span">邮编：264209</span><br>
                            <span class="footer-span">邮箱：jssywtzx@126.com</span>
                        </div>
                        <div class="col-md-1">
                             <hr class="footer-hr">
                        </div>
                        <div class="col-md-3 text-left" style="padding-left: 0;">
                            <br>
                                <img id="wechat" src="{% static 'jingsongimg/qq.svg' %}" alt="qq" style="width: 16%; cursor: pointer;">
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <img id="qq" src="{% static 'jingsongimg/wechat.svg' %}" alt="qq" style="width: 12%; cursor: pointer;">
                            <br>
                        </div>
                    </div>
                    <br>
                    <div class="row text-center">
                        <div class="col-md-2"></div>
                        <div class="col-md-8 text-center">
                            <span class="footer-span" style="margin-left: 7%">
                                ©2020 哈尔滨工业大学（威海）Lowpoly云服务协会版权所有 |
                                <a class="footer-span" href="http://beian.miit.gov.cn/publish/query/indexFirst.action" target="_blank">粤ICP备20037111号</a>
                            </span><br>
                            <span class="footer-span" style="margin-left: 7%">All trademarks referenced herein are the properties of their respective owners.</span><br>
                            <span class="footer-span" style="margin-left: 7%">Sponsored by Lowpoly Cloud Service Association</span>
                        </div>
                        <div class="col-md-2"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
</div>

<script type="text/javascript" src= "{% static 'js/jquery-3.4.1.min.js' %}"></script>
<script>
    $("#wechat-code").hide()
    $("#qq-code").hide()

    $(document).ready(function(){
        $("#wechat").hover(function(){
            $("#wechat-code").fadeToggle(200)
        })
        $("#qq").hover(function(){
            $("#qq-code").fadeToggle(200)
        })
    })
</script>
